<template>
  <div>
    <CategorySelector style="margin-bottom:10px"></CategorySelector>
    <el-card>
      <el-button style="margin-bottom:10px" type="primary" :icon="Plus">添加SPU</el-button>
      <el-table border>
        <el-table-column label="序号" type="index" width="100px" align="center"></el-table-column>
        <el-table-column label="SPU名称" prop="" ></el-table-column>
        <el-table-column label="SPU描述" prop="" ></el-table-column>
        <el-table-column label="操作" prop="" >
          <template v-slot="{row,$index}">
            <el-button type="primary" :icon="Plus"></el-button>
            <el-button type="primary" :icon="Edit"></el-button>
            <el-button type="info" :icon="InfoFilled"></el-button>
            <el-button type="danger" :icon="Delete"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        style="margin-top: 15px"
        v-model:currentPage="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[3, 5, 10, 20]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout=" prev, pager, next, jumper, ->, sizes,total "
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script lang="ts">
import CategorySelector from "@/components/CategorySelector/index.vue";
export default {
  name: "Spu",
  components: {
    CategorySelector,
  },
};
</script>
<script lang="ts" setup>
import { Plus, Edit, Delete,InfoFilled} from "@element-plus/icons-vue";
</script>

<style>
</style>